<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui.js"></script>
    <script src="./power.js"></script>
    <style>
        .article_content{
            text-indent: 2em;
            line-height: 40px;
            padding: 10px 50px;
            box-sizing: border-box;
        }
        h2{
            text-align: center;
        }
        .msg{
            width: 1400px;
            margin: 0 auto;
        }
        .msg .message{
            width: 100%;
            min-height: 100px;
            background-color: #fff;
            padding: 35px;
            box-sizing: border-box;
            margin-bottom: 20PX;
        }
        .msg .user{
            width: 30px;
            height: 30px;
            margin-right: 20px;

        }
        .msg .title{
            display: flex;
            align-items: center;
           font-weight: 700;
           padding-bottom: 20px;
           box-sizing: border-box;
           border-bottom: 1px solid #f0f0f0;
        }
        .msg .content{
            margin: 20px 0;
        }
        .msg .bottom{
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #f0f0f0;
            padding-top: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            区域论坛系统
        </div>
        <ul>
            <li><a href="/">论坛首页</a></li>
            <li><a href="/article/addArticle">发帖</a></li>
            <li><a href="/article/about">关于我们</a></li>
            <li class="search">
                <div>
                    <input id="searchtext" type="search" placeholder="请输入搜索内容">
                    <a id="searchIcon"><img  src="/search.svg" alt="" class="glass"> </a>
                </div>
                <script>
                    layui.use(function(){
                        let $ = layui.$;
                            $('#searchtext').change(function(res){
                                if($(this).val() != '')
                                $('#searchIcon').attr('href','/article/search/' + $('#searchtext').val())
                                else{
                                    $('#searchIcon').attr('href','')
                                }
                            })
                        })
                </script>
            </li>
        </ul>


        <div class="user"></div>
        <script>
             layui.use( function(){
                  var $ = layui.$
                  if(sessionStorage.user){
                    $('.user').append(`
                        <div>欢迎您：<a class="my" href="/user/users/${JSON.parse(sessionStorage.user).id}">${JSON.parse(sessionStorage.user).username}</a></div>
                    `)
                  }else{
                      $('.user').append(`
                        <div class="login">
                            <a href="/user/userLogin">登录</a>
                        </div>
                        <div class="regrister">
                            <a href="/user/regrister">注册</a>
                        </div>
                      `)
                  }
                });
        </script>
    </header>
    <div id="root">
        <h2><%= data.title %></h2>
       <p class="article_content">
            <%= data.content %>
            <span style="text-align: right;display: block;">
                发布时间：<%= data.create_time %>
            </span>
        </p>

        <div class="msg">
            <h1 style="margin-bottom: 20px;">评论：</h1>
            <div class="message">
                <div class="title">
                    <svg class="user" t="1633166338974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2396" width="48" height="48"><path d="M512 512c123.776 0 224-100.224 224-224S635.776 64 512 64a223.936 223.936 0 0 0-224 224C288 411.776 388.224 512 512 512z m0 64c-149.504 0-448 85.76-448 256v128h896v-128c0-170.24-298.496-256-448-256z" fill="#515151" p-id="2397"></path></svg>
                    <span id="msg_user"></span>
                </div>
                <div class="content">
                    <textarea id="content" class="layui-textarea" placeholder="输入您的留言！"></textarea>
                </div>
                <div class="bottom">
                    <button id="submit" class="layui-btn">提交</button>
                </div>
            </div>
            <div class="list"></div>
                <script>
                    layui.use(function(){
                        function timeFormat(stamp){
                            let date = new Date(parseInt(stamp))
                            let year = date.getFullYear()
                            let month = date.getMonth() + 1;
                            let day = date.getDate()
                            return `${year}年${month}月${day}日`;
                        }
                        let $ = layui.$;
                        $('#msg_user').text(JSON.parse(sessionStorage.user).username)
                        $.get({
                            url:'/message/getAll?article_id='+window.location.href.split('/')[window.location.href.split('/').length-1],
                            success:function(res){
                                res.data.forEach(item => {
                                    $('.list').append(`
                                    <div class="message">
                                        <div class="title">
                                            <svg class="user" t="1633166338974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2396" width="48" height="48"><path d="M512 512c123.776 0 224-100.224 224-224S635.776 64 512 64a223.936 223.936 0 0 0-224 224C288 411.776 388.224 512 512 512z m0 64c-149.504 0-448 85.76-448 256v128h896v-128c0-170.24-298.496-256-448-256z" fill="#515151" p-id="2397"></path></svg>
                                            <span>${item.username}</span>
                                        </div>
                                        <div class="content">
                                            <p>${item.content}</p>
                                        </div>
                                        <div class="bottom">
                                            <span>留言时间：${timeFormat(item.create_time)}</span>
                                        </div>
                                        
                                    </div>
                                    `)
                                });
                                
                            }
                        })
                        let isDisable = false;
                            $.get({
                                url:'/power?id='+JSON.parse(sessionStorage.user).id,
                                success:function(res){
                                    if(res.code != 200){
                                        isDisable = true;
                                        
                                    }
                                }
                            })
                        $('#submit').click(function(){

                            // 查询权限
                            if(isDisable){
                                layer.msg('账号异常，无法留言，请联系管理员！');
                                return false;
                            }

                            $.post({
                            url:'/message/add',
                            data:{
                                article_id:window.location.href.split('/')[window.location.href.split('/').length-1],
                                user_id:JSON.parse(sessionStorage.user).id,
                                content:$('#content').val(),
                                create_time:new Date().getTime()
                            },
                            success:function(res){
                                if(res.code == 200){
                                    layer.msg('评论成功！')
                                    $('.list').prepend(`
                                    <div class="message">
                                        <div class="title">
                                            <svg class="user" t="1633166338974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2396" width="48" height="48"><path d="M512 512c123.776 0 224-100.224 224-224S635.776 64 512 64a223.936 223.936 0 0 0-224 224C288 411.776 388.224 512 512 512z m0 64c-149.504 0-448 85.76-448 256v128h896v-128c0-170.24-298.496-256-448-256z" fill="#515151" p-id="2397"></path></svg>
                                            <span>${JSON.parse(sessionStorage.user).username}</span>
                                        </div>
                                        <div class="content">
                                            <p>${$('#content').val()}</p>
                                        </div>
                                        <div class="bottom">
                                            <span>留言时间：${timeFormat(new Date().getTime())}</span>
                                        </div>
                                        
                                    </div>
                                    `)
                                    $('#content').val('')
                                }
                            }
                        })
                        })
                    })
                </script>
            
        </div>
       
    </div>
</body>
</html>